import Vue from 'vue'

import 'normalize.css/normalize.css'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import '@/styles/index.scss'

import App from './App'
import store from './store'
import router from './router'

import '@/icons'
import '@/permission'

Vue.use(ElementUI)

Vue.config.productionTip = false

// 自定义权限指令
Vue.directive('permission', {
  inserted (el, binding) {
    // 获取vuex中的points数组
    const { points } = store.state.user.userInfo.roles
    // 判断 binding.value的值 是否在points数组中

    // 如果不在
    if (!points.includes(binding.value)) {
      // 删除
      el.remove()
      // 禁用按钮
      // el.disabled = true
    }
  }
})

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// 问题：登录成功后，篡改cookie中的token，
//      然后刷新页面，为什么会走到响应拦截器的401判断中？

// 代码执行流程：
// 1. 把本地的中无效token取出赋值给vuex中的token
// 2. 执行路由全局前置守卫，因为刷新页面了，会导致vuex中的userInfo变为初始值空对象，
//    会触发action函数，发起获取用户信息请求
// 3. 执行请求拦截器，在请求头中携带了无效的token给后台
// 4. 响应401状态码，执行401判断代码

// 要求:
// 1. 定义函数完成
// 2. 对象中不能含有children属性
// 3. 可以把转好的列表，再转回树形数据

// RBAC权限控制的核心步骤/页面访问权的控制核心思路:
// RBAC: Role Based Access Control，基于角色的权限控制，
//       给员工分配角色，给角色分配权限，实现不同员工登录成功显示不同的左侧菜单(不同权限)
// (1) 左侧菜单是基于路由表动态生成的(菜单与路由紧密相关)
// (2) 路由划分静态路由表和动态路由表,控制菜单的不同只需控制动态路由表
// (3) 登录成功后,在路由全局前置守卫中,请求员工信息,拿到菜单权限数组筛选动态路由表(得到实际拥有的路由权限)
// (4) 筛选的结果通过 router.addRoutes() 追加至路由表(输入path才可以访问相应的页面组件)
// (5) 在vuex中也存储一份路由表信息,从而去渲染左侧菜单(因为this.$router.options.routes不是响应式的)

// 按钮的操作权的控制:
// 核心思路:
// (1) 封装v-permission自定义指令,实现对按钮操作权的控制
// (2) 判断按钮上绑定指令的标识是否在员工信息下权限点(points)数组中
// (3) 如果不在，要么删除，要么禁用
